<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">

<head>
<meta charset="UTF-8">
<title>首页</title>
<link rel="stylesheet" type="text/css" th:href="@{/css1/normalize.css}"/><!--CSS RESET-->
<link rel="stylesheet" th:href="@{/css1/style.css}">
<link rel="stylesheet" type="text/css" th:href="@{/css1/normalize.css}" /><!--CSS RESET-->
<link rel="stylesheet" th:href="@{/dist/jSlider.min.css}">
<link href="http://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
<link href="http://cdn.bootcss.com/font-awesome/4.6.3/css/font-awesome.min.css" rel="stylesheet">
<link rel="stylesheet" type="text/css" th:href="@{/css2/htmleaf-demo.css}">
<style type="text/css">
		.demo{padding: 2em 0;}
		.our-team{
		    padding: 30px 0 40px;
		    background: #f7f5ec;
		    text-align: center;
		    overflow: hidden;
		    position: relative;
		}
		.our-team .pic{
		    display: inline-block;
		    width: 130px;
		    height: 130px;
		    margin-bottom: 50px;
		    z-index: 1;
		    position: relative;
		}
		.our-team .pic:before{
		    content: "";
		    width: 100%;
		    height: 0;
		    border-radius: 50%;
		    background: #ee4266;
		    position: absolute;
		    bottom: 135%;
		    right: 0;
		    left: 0;
		    opacity: 0.2;
		    transform: scale(3);
		    transition: all 0.3s linear 0s;
		}
		.our-team:hover .pic:before{ height: 100%; }
		.our-team .pic:after{
		    content: "";
		    width: 100%;
		    height: 100%;
		    border-radius: 50%;
		    background: #ee4266;
		    position: absolute;
		    top: 0;
		    left: 0;
		    z-index: -1;
		}
		.our-team .pic img{
		    width: 100%;
		    height: auto;
		    border-radius: 50%;
		    transform: scale(1);
		    transition: all 0.9s ease 0s;
		}
		.our-team:hover .pic img{
		    box-shadow: 0 0 0 14px #f7f5ec;
		    transform: scale(0.7);
		}
		.our-team .team-content{ margin-bottom: 30px; }
		.our-team .title{
		    font-size: 22px;
		    font-weight: 700;
		    color: #4e5052;
		    letter-spacing: 1px;
		    text-transform: capitalize;
		    margin-bottom: 5px;
		}
		.our-team .post{
		    display: block;
		    font-size: 15px;
		    color: #4e5052;
		    text-transform:capitalize;
		}
		.our-team .social{
		    width: 100%;
		    padding: 0;
		    margin: 0;
		    background: #eb1768;
		    position: absolute;
		    bottom: -100px;
		    left: 0;
		    transition: all 0.5s ease 0s;
		}
		.our-team:hover .social{ bottom: 0; }
		.our-team .social li{ display: inline-block; }
		.our-team .social li a{
		    display: block;
		    padding: 10px;
		    font-size: 17px;
		    color: #fff;
		    transition: all 0.3s ease 0s;
		}
		.our-team .social li a:hover{
		    color: #eb1768;
		    background: #f7f5ec;
		}
		@media only screen and (max-width: 990px){
		    .our-team{ margin-bottom: 30px; }
		}
	</style>
<style type="text/css">
			body {
				font: normal normal 300 16px/24px 'Open Sans', sans-serif;
				margin: 0;
				padding: 0;
				color: #bbb;
				background: #232526;
				background: -moz-radial-gradient(center, ellipse cover,  #232526 0%, #232526 100%);
				background: -webkit-radial-gradient(center, ellipse cover,  #232526 0%,#232526 100%);
				background: radial-gradient(ellipse at center,  #232526 0%,#232526 100%);
			}
			div {
				box-sizing: border-box;
			}
			h1, h2, h3, h4, h5, h6, p {
				margin: 0 0 2rem 0;
				padding: 0;
			}
			h1, h2, h3, h4, h5, h6 {
				font-weight: 400;
				color: #fff;
			}
			ul {
				margin-bottom: 2rem;
			}
			a {
				color: #cddc39;
				text-decoration: none;
				transition: all .325s;
			}
			a:hover {
				color: #000;
				background: #cddc39;
			}
			strong {
				font-weight: 400;
			}
			
			.wrapper{
  				width: 100%;
  				
  				background-color:#E0EEE0;
			}
			.top {
				width: 900px;
				padding-top:10px;
				margin: auto;
			}
			
			.content {
				width: 700px;
				padding: 50px;
				margin: auto;
			}
			.notes {
				padding: 7px;
			}
			.notes h6 {
				color: #666;
				line-height: 1.3;
				font-weight: 400;
				margin-bottom: 0;
			}
		
			
		</style>
		<style type="text/css">
			#slider1 {
				width: 100%;
				height: 100%;
				margin: 0 auto;
				border: 7px solid rgba(0, 0, 0, .35);
				box-shadow: 2px 2px 10px 0 rgba(0, 0, 0, .1);
				border-radius: 5px;
			}
			
			/* responsive rules */
			@media (max-width: 713px) {
				#slider1 {
					width: 100%;
					height: auto; /* reset slider height to automatically fix with the first image height. */
					border: none;
					margin-top: 0;
					-webkit-border-radius: 0;
					border-radius: 0;
				}
			}
			
		</style>
</head>
<body>
<div th:replace="header :: html"></div>
<div class="wrapper">
   <div class="top">
			<div class="jSlider" id="slider1">
				<div><img src="/images/1.jpg"></div>
				<div><img src="/images/2.jpg"></div>
				<div><img src="/images/3.jpg"></div>
				<div><img src="/images/4.jpg"></div>
				<div><img src="/images/5.jpg"></div>
				<div><img src="/images/6.jpg"></div>
				<div><img src="/images/7.jpg"></div>
				<div><img src="/images/8.jpg"></div>
				<div><img src="/images/9.jpg"></div>
				
			</div>
		</div>
		</div>
<div style="font-size:20px;" align="center">
	<p>歌单</p>
</div>

	<div class="htmleaf-container">
	<div class="demo">
		        <div class="container">
		            <div class="row">
		            <div th:each="s,stat:${getlist}">
		                <div class="col-md-3 col-sm-6" >
				
		                    <div class="our-team" style="height:400px;">
		                        <div class="pic">
		                           <a th:href="@{/sheet/getListDetail(sheet_id=${s.sheet_id})}"><img th:src="${s.sheet_pic}"></a> 
		                        </div>
		                        <div class="team-content">
		                            <h3 class="title" th:text="${s.sheet_name}"></h3>
		                            <Span class="post" th:text="${s.intro}"></Span>
		                        </div>
		                        <ul class="social">
		                            <li><a href="#" class="fa fa-linkedin"></a></li>
		                        </ul>
		                    </div>
		                </div>

		                    </div>
		                </div>
		            </div>
		        </div>
		   </div>
		    <div th:replace="footer :: html"></div>
<script th:src="@{/js/jquery-1.11.0.min.js}" type="text/javascript"></script>
<script th:src="@{/dist/jquery.jSlider.min.js}"></script>
</body>
</html>